import React from 'react'
import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
type Props = {
    piedata: Array<{
        x: string,
        val: number
    }>,
    w?: string,
    h?: string,
    id: string,
    isShowToolTip: boolean,
}

export default function Appechartpie({ piedata, w, h, id, isShowToolTip }: Props) {
    const ref1 = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        // console.log(ref1.current);
        var chartDom = document.getElementById(id)!;
        var myChart = echarts.init(chartDom);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
        let option: any = {
            title: {
                text: '每周消费占比'
            },
            legend: {
                top: '20px',
                left: 'left',
                orient: 'vertical'

            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [20, '80%'],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: piedata.map(item => ({ name: item.x, value: item.val }))
                }
            ]
        }

        //判断是否需要显示tooltip
        if (isShowToolTip) {
            option.tooltip = {}
        }
        myChart.setOption(option);

    }, [])

    return (
        <div id={id} style={{
            width: w ? w : '500px',
            height: h ? h : '500px',
            padding: '10px'
        }} ref={ref1}></div>
    )
}